延續上篇 customize tooltips with data attribute 後，另外也來自己手刻一個麵包屑吧～

可能想說套個 bootstrap 像是這樣子：

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
  </nav>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
  </nav>

不過在 rails 裡面如果每一頁都要有 breadcrumb 還有可能 li 內層的數量不同時，其實滿麻煩的，也會重複的一直寫相同的 link 等等，所以習慣會抽成 partial 來做，並把像是固定的 link，例如：首頁，寫死就不用一直重複的寫。

  # user show page

  <% content_for :breadcrumb do %>
    <%= render "shared/breadcrumb", items: [
      { url: users_path, title: "User show page" },
      { url: nil, title: @users.first.name }
    ] %>
  <% end %>

  # app > views > shared > _breadcrumb.html.erb

  <div class="text-12px flex items-center">
    <li class="inline-block">
      <a href="<%= root_path %>"><span>首頁</span></a>
    </li>
    <% items.each do |item| %>
      <li class="inline-block flex items-center">
        &nbsp;&nbsp;/&nbsp;&nbsp;
        <% if item[:url] %>
          <a href="<%= item[:url] %>"><span><%= item[:title] %></span></a>
        <% else %>
          <span ><%= item[:title] %></span>
        <% end %>
      </li>
    <% end %>
  </div>

這樣子可以更彈性，並且傳入 items 內的數量多寡，就會決定 li 後麵包屑的數量，並且最後一個帶入 url nil 就改為顯示 text，而顯示的內容可能會跟寬度還有些問題，這部分就看 css 怎麼做搭配，文字過長或許就可以透過 whitespace-nowrap overflow-hidden 與 flex-shrink-0 等等方式來處理。

參考來源

• Bootstrap Breadcrumb

My blog

• https://chestertang.tw/